<template>
    <div class="group-wrap">
        <div
                class="group-item no-select"
                v-for="(item, index) in bookmark"
                :key="index"
        >
            <div class="group-title" @click="itemFold(index)">
                <img class="title-img" :src="item.icon" alt="" v-if="item.icon"/>
                <div class="title-text">{{item.title}}</div>
                <DownOutlined class="title-icon" :rotate="item.state ? 0 : 180"/>
            </div>
            <div
                    class="group-body app-row app-col-space10"
                    :class="item.state ? '' : 'hidden'"
            >
                <div
                        class="app-col-md2 app-col-sm3 app-col-xs4"
                        v-for="(val, idx) in item.website"
                        :key="idx"
                        @click="openPage(val)"
                >
                    <div class="list-item" :title="val.title">
                        <div class="list-body">
                            <img class="item-img" :src="val.icon" alt="">
                            <div class="item-info text-elip">
                                <div class="item-info-title text-elip">{{val.title || '-'}}</div>
                                <!--<div class="item-info-desc text-elip">{{val.desc || '-'}}</div>-->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {useStore} from "vuex";
    import {openPage} from '/src/util/index';
    import {DownOutlined} from '@ant-design/icons-vue';

    export default {
        name: "Bookmark",
        // 组件
        components: {
            DownOutlined,
        },
        // 数据
        data() {
            return {
                // vuex 状态
                store: useStore().state,
                // 书签
                bookmark: [],
            }
        },
        // DOM未渲染前调用
        created() {
            this.getBookmark();
        },
        // 方法
        methods: {
            // 折叠
            itemFold(index) {
                this.bookmark[index].state = !this.bookmark[index].state;
            },
            // 跳转
            openPage(item) {
                let that = this;
                that.$store.dispatch('clickBookmark', {
                    uwid: item.id,
                    wid: item.wid,
                }).then(res => {
                    openPage(item.url, 'bookmark');
                })
            },
            // 获取书签数据
            getBookmark(refresh = false) {
                let that = this;
                that.$store.dispatch('getBookmark', refresh).then(list => {
                    console.log('getBookmark', list);
                    list.forEach((item, index) => {
                        item.state = true;
                    });
                    that.bookmark = list;
                });
            },
        },
        // 监听
        watch: {
            // key 变化
            '$store.state.key'(val) {
                this.getBookmark(true);
            },
        }
    }
</script>

<style lang="less" scoped>
    @radius: 10px;

    .group-wrap {
        margin-top: 20px;

        .group-item {
            .group-title {
                margin-top: 12px;
                margin-bottom: 10px;
                display: flex;
                align-items: center;
                cursor: pointer;

                .title-img {
                    position: relative;
                    width: 22px;
                    height: 22px;
                    border-radius: 22px;
                    margin-right: 6px;

                    &:after {
                        content: '';
                        display: block;
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        z-index: 2;
                        top: 0;
                        left: 0;
                        background: url('/src/assets/imgs/network.png') white;
                        background-size: 100%;
                    }
                }

                .title-text {
                    flex: 1;
                    height: 22px;
                    line-height: 22px;
                    color: black;
                    font-size: 14px;
                    font-weight: bold;
                }

                .title-icon {
                    display: inline-block;
                    padding: 5px;
                    font-size: 12px;
                    color: #000000;
                    cursor: pointer;
                    text-align: center;
                    border-radius: 6px;
                    transition: all .3s ease;

                    &:hover {
                        background-color: #e8e8e8;
                    }
                }
            }

            .group-body {
                transition: all .5s;
                -moz-transition: all .5s;
                -o-transition: all .5s;

                &.hidden {
                    height: 0;
                    display: none;
                }

                .list-item {
                    padding: 10px;
                    background-color: white;
                    border-radius: @radius;
                    cursor: pointer;

                    &:hover {
                        background-color: #f1f1f1;
                    }

                    .list-body {
                        display: flex;
                        align-items: center;

                        .item-img {
                            position: relative;
                            width: 18px;
                            height: 18px;
                            border-radius: @radius;

                            &:after {
                                content: '';
                                display: block;
                                width: 100%;
                                height: 100%;
                                position: absolute;
                                z-index: 2;
                                top: 0;
                                left: 0;
                                background: url('/src/assets/imgs/network.png') white;
                                background-size: 100%;
                            }
                        }

                        .item-info {
                            flex: 1;
                            margin-left: 5px;

                            .item-info-title {
                                font-size: 14px;
                                height: 16px;
                                line-height: 16px;
                            }

                            .item-info-desc {
                                height: 15px;
                                font-size: 14px;
                                line-height: 14px;
                            }
                        }
                    }
                }
            }

        }
    }

    @media screen and (max-width: 768px) {
        .group-wrap {
            .group-item {
                .group-body {
                    .list-item {
                        padding: 10px;

                        .list-body {
                            .item-info {
                                .item-info-title {
                                    font-size: 12px;
                                }
                            }
                        }

                    }
                }
            }
        }
    }
</style>
